<script setup lang="ts">
// ----------------------- 导入相关依赖 -----------------------
import {nextTick, onMounted, onUnmounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import SysDialog from "@/components/dialog/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import useInstance from "@/hooks/useInstance";
import {ProcessListParam} from "@/api/process/type";
import {getListApi} from "@/api/process";
import {Search, Refresh} from '@element-plus/icons-vue'

// ----------------------- 组件状态定义 -----------------------
const {dialog, onShow, onClose} = useDialog()
const {global} = useInstance()

// 定义emit事件
const emit = defineEmits(['handleProcessSelectionChange','confirmProcessSelect'])

// 表格高度自适应
const tableHeight = ref(0)

// ----------------------- 表格相关 -----------------------
const tableData = ref([])
const loading = ref(false)
const paginationData = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

// ----------------------- 查询表单相关 -----------------------
const searchForm = reactive<ProcessListParam>({
  processCode: undefined,
  processName: undefined,
  isActive: undefined,
  page: 1,
  limit: 10
})

// 查询方法
const search = () => {
  paginationData.currentPage = 1
  getTableData()
}

// 重置查询
const reset = () => {
  searchForm.processCode = undefined
  searchForm.processName = undefined
  searchForm.isActive = undefined
  search()
}

// ----------------------- 表格数据处理 -----------------------
const getTableData = async () => {
  loading.value = true
  try {
    searchForm.page = paginationData.currentPage
    searchForm.limit = paginationData.pageSize
    let res = await getListApi(searchForm)
    if (res && res.data) {
      tableData.value = res.data.list
      paginationData.total = res.data.total
    }
  } catch (error) {
    console.error('获取表格数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 选择工序
const handleSelect = (row: any) => {
  emit('handleProcessSelectionChange', row)
}

// 确认选择完毕
const confirmProcess = () => {
  emit('confirmProcessSelect')
}

// 关闭弹框
const closeDialog = () => {
  onClose()
}

// ----------------------- 生命周期钩子 -----------------------
onMounted(() => {
  dialog.height = 500
  dialog.width = 1000
  dialog.title = '选择工序'
  getTableData()
  nextTick(() => {
    tableHeight.value = 380
  })
})

// 监听窗口大小变化
const handleResize = () => {
  nextTick(() => {
    tableHeight.value = 380
  })
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 暴露方法给父组件
defineExpose({
  onShow,
  onClose
})
</script>

<template>
  <sys-dialog
    :title="dialog.title"
    :width="dialog.width"
    :visible="dialog.visible"
    :height="dialog.height"
    @onClose="closeDialog"
    @on-confirm="confirmProcess"
  >
    <template #content>
      <div class="process-dialog-container">
        <div class="dialog-header">
          <span class="dialog-title">请选择需要的工序</span>
          <div class="dialog-subtitle">您可以搜索或浏览列表来找到所需的工序</div>
        </div>
      
        <!-- 查询表单区域 -->
        <el-card class="search-card" shadow="hover">
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="工序编码">
              <el-input 
                v-model="searchForm.processCode" 
                placeholder="请输入工序编码" 
                prefix-icon="Search"
                clearable
              />
            </el-form-item>
            <el-form-item label="工序名称">
              <el-input 
                v-model="searchForm.processName" 
                placeholder="请输入工序名称"
                prefix-icon="Search"
                clearable
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select 
                v-model="searchForm.isActive" 
                placeholder="是否启用" 
                clearable 
                class="status-select"
              >
                <el-option label="启用" :value="0"/>
                <el-option label="禁用" :value="1"/>
              </el-select>
            </el-form-item>
            <el-form-item class="search-buttons">
              <el-button type="primary" :icon="Search" @click="search" class="search-btn">
                查询
              </el-button>
              <el-button :icon="Refresh" @click="reset" class="reset-btn">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 表格区域 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          :height="tableHeight"
          class="data-table"
          @selection-change="handleSelect"
        >
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column prop="processCode" label="工序编码" min-width="120" align="center"/>
          <el-table-column prop="processName" label="工序名称" min-width="120" align="center"/>
          <el-table-column prop="description" label="工序描述" min-width="200" show-overflow-tooltip align="center"/>
          <el-table-column prop="cost" label="工序成本(元)" min-width="120" align="center">
            <template #default="scope">
              <span class="cost-value">{{ scope.row.cost || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isActive" label="状态" min-width="80" align="center">
            <template #default="scope">
              <el-tag 
                :type="scope.row.isActive === 0 ? 'success' : 'danger'" 
                effect="light"
                size="small"
              >
                {{ scope.row.isActive === 0 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          v-model:current-page="paginationData.currentPage"
          v-model:page-size="paginationData.pageSize"
          :page-sizes="[10, 20, 50]"
          :total="paginationData.total"
          layout="total, sizes, prev, pager, next"
          class="pagination"
          @size-change="getTableData"
          @current-change="getTableData"
        />
        
        <div class="dialog-footer">
          <span class="selection-info">
            <i class="el-icon-info"></i>
            选择工序后点击确认按钮完成操作
          </span>
        </div>
      </div>
    </template>
  </sys-dialog>
</template>

<style scoped lang="scss">
.process-dialog-container {
  padding: 0 15px;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  margin-bottom: 15px;
  
  .dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: #67c23a;
    display: block;
    margin-bottom: 5px;
  }
  
  .dialog-subtitle {
    font-size: 14px;
    color: #909399;
  }
}

.search-card {
  margin-bottom: 15px;
  border-radius: 8px;
  transition: all 0.3s;
  
  :deep(.el-card__body) {
    padding: 15px;
  }
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
  .el-form-item {
    margin-bottom: 0;
    margin-right: 16px;
  }
  
  .status-select {
    width: 120px;
  }
  
  .search-buttons {
    margin-left: auto;
    
    .el-button {
      margin-left: 8px;
      transition: all 0.3s;
      
      &:first-child {
        margin-left: 0;
      }
    }
    
    .search-btn {
      background: linear-gradient(135deg, #1989fa, #0056b3);
      border: none;
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
      }
    }
    
    .reset-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(144, 147, 153, 0.2);
    }
  }
}

.data-table {
  flex: 1;
  margin-bottom: 10px;
  border-radius: 4px;
  
  :deep(.el-table__header-wrapper) {
    th {
      background-color: #f2f6fc;
      font-weight: 600;
    }
  }
  
  :deep(.el-table__row) {
    cursor: pointer;
    
    &:hover {
      td {
        background-color: #f0f9eb;
      }
    }
    
    &.selected td {
      background-color: #e1f3d8;
    }
  }
  
  .cost-value {
    font-weight: 600;
    color: #409eff;
  }
}

.pagination {
  margin: 15px 0;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 10px 0;
  border-top: 1px dashed #e1f3d8;
  
  .selection-info {
    color: #909399;
    font-size: 14px;
    
    i {
      margin-right: 5px;
      color: #67c23a;
    }
  }
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 10px;
  margin-bottom: 0;
}

:deep(.el-input__wrapper), :deep(.el-select .el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  
  &:hover {
    box-shadow: 0 0 0 1px #c0c4cc inset;
  }
  
  &.is-focus {
    box-shadow: 0 0 0 1px #67c23a inset;
  }
}
</style>
